<template>
  <div className="container">
    <div className="left">
      <svg
        t="1664720482820"
        class="icon1"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="28272"
        width="30"
        height="30"
      >
        <path
          d="M870.4 307.2l-192-211.2c-12.8-19.2-38.4-32-70.4-32H256c-70.4 0-128 57.6-128 128v640c0 70.4 57.6 128 128 128h512c70.4 0 128-57.6 128-128V371.2c0-19.2-6.4-44.8-25.6-64z m-44.8 44.8c0 6.4 6.4 12.8 6.4 19.2v6.4l-166.4-70.4V172.8l160 179.2zM768 896H256c-38.4 0-64-25.6-64-64V192c0-38.4 25.6-64 64-64h358.4v192c0 6.4 6.4 19.2 12.8 19.2L832 428.8V832c0 38.4-32 64-64 64z"
          fill="#d81e06"
          p-id="28273"
        ></path>
        <path
          d="M556.8 588.8l-19.2 25.6V384c0-12.8-12.8-25.6-25.6-25.6s-25.6 12.8-25.6 25.6v230.4l-19.2-25.6c-6.4-6.4-25.6-6.4-32 0-6.4 6.4-6.4 25.6 0 32l64 64c6.4 6.4 12.8 6.4 19.2 6.4s12.8 0 19.2-6.4l64-64c6.4-6.4 6.4-25.6 0-32-19.2-6.4-32-6.4-44.8 0z"
          fill="#d81e06"
          p-id="28274"
        ></path>
      </svg>
      <div className="rec">{{ "推荐帖子" }}</div>
    </div>
    <div className="right">
      <div className="checkAll">
        {{ "查看全部" }}
      </div>
      <svg
        t="1664705318396"
        class="icon2"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="25853"
        width="20"
        height="20"
      >
        <path
          d="M213.333333 128l130.432-128L853.333333 512 343.765333 1024 213.333333 896l384-384z"
          p-id="25854"
        ></path>
      </svg>
    </div>
  </div>
</template>
<script setup></script>
<style scoped lang="scss">
.container {
  width: 1000px;
  height: 50px;
  display: flex;
  justify-content: space-between;
  position: absolute;
//   top: 1462px;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 900;
  border-bottom: 1px dashed #eee;
  .left {
    display: flex;
    position: absolute;
    top: 50%;

    transform: translateY(-50%);
    width: 200px;
    height: 100%;
    &:hover {
      cursor: pointer;
    }
    .icon1 {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
    .rec {
      position: absolute;
      left: 30px;
      top: 54%;
      transform: translateY(-50%);
    }
  }
  .right {
    display: flex;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 200px;
    height: 100%;
    &:hover {
      cursor: pointer;
    }
    .icon2 {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }
    .checkAll {
      position: absolute;
      right: 25px;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
</style>
